<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    /* 整体页面样式 */
    body {
            /* 梦幻紫到浅蓝渐变背景 */
            background: linear-gradient(to bottom right,  #7fcff0, #b1e27f, #0077be); 
            font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            cursor: pointer; /* 将鼠标指针设置为手型，提示可点击 */
            transition: transform 0.5s ease; /* 添加过渡效果，用于点击时的动画 */
        }
        /* 当背景被点击时的样式 */
        body:active {
            transform: scale(0.98); /* 点击时背景缩小一点，产生点击反馈效果 */
        }

        /* 容器样式 */
      .container {
            background-color: rgba(224, 216, 216, 0); /* 半透明黑色背景，增加层次感 */
            border-radius: 10px; /* 圆角边框 */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 阴影效果 */
            padding: 40px;
            width: 400px;
            position: relative;
        }
        /* 登录标题样式 */
      .register-container h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 30px;
            color: #0ca3d2; /* 标题颜色突出显示 */ 
        }
        /* 表单输入框样式 */
        form input[type="text"],
        form input[type="password"] {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border: 1;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
            color: black;
            outline: none;
        }
        button {
        background-color: #0ca3d2;
        color: white;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        }
        button:hover {
          background-color: darkblue;
        }
        button:active {
          background-color: navy;
        }
        button:focus {
          outline: none;
        }
        a {
      display: inline-block;
      text-decoration: none;
      color: #007bff;
      padding: 10px;
      border: 1px solid #007bff;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap; /* 防止内容过长时换行 */
    }
    a:hover {
      background-color: #70aff3;
      color: white;
    }     
</style>
</head>
<body>
  <section class="container">
  <div class="register-container">
    <h1>用户注册</h1>
    <form method="post">
    <p><input type="text" id="register-username" placeholder="请输入用户名" /></p>
    <p><input type="password" id="register-password" placeholder="请输入密码" /></p>
    <button onclick="registerUser()">注册</button>
    <br><p>已有账号？<a href="login.html">点击登录</a></p>
</form>
</div>
</section>
<script src="script.js"></script>
</body>
</html>